<template>
  <div class="makeAnAppointment">
    <div class="instructions">
      <p>预约说明：周一至周六 08:00-16:00</p>
      <div class="clearfix">
        <div class="fl">
          <span class="color"></span>
          <span>可预约</span>
        </div>
        <div class="fl">
          <span class="color"></span>
          <span>已预约</span>
        </div>
        <div class="fl">
          <span class="color"></span>
          <span>预约已满</span>
        </div>
      </div>
    </div>
    <van-calendar
      title
      :show-subtitle="false"
      :show-mark="false"
      :poppable="false"
      :show-confirm="false"
      :style="{ height: '245px' }"
      :formatter="formatter"
    />
    <van-tabs v-model="active">
      <van-tab title="上午">
        <div
          v-for="(item,index) in timeObj.morning"
          :key="item.timeSub + index"
          class="times"
          @click="timeClick(item,index)"
          :class="{active:conventionTime.timeId === item.id,disabled:item.disabled,haveActive:item.have}"
        >
          <p v-if="!item.disabled">{{item.timeSub}}</p>
          <p v-else>预约已满</p>
        </div>
      </van-tab>
      <van-tab title="下午">
        <div v-for="(item,index) in timeObj.afternoon" :key="item.timeSub + index" class="times">
          <p>{{item.timeSub}}</p>
        </div>
      </van-tab>
    </van-tabs>
    <!-- swiper -->
    <!-- <swiper :options="swiperOption" ref="swiper">
      <swiper-slide v-for="item in dateList" :key="item.time">
        <p>{{ item.day }}</p>
        <p>{{ item.time }}</p>
      </swiper-slide>
    </swiper>-->
    <!-- choose time -->
    <!-- <div class="chooseTime">
      <div
        v-for="(item,index) in timeArr"
        :key="item.timeSub + index"
        @click="timeClick(item,index)"
        :class="{active:conventionTime.timeId === item.id,disabled:item.disabled}"
      >
        <p>
          <span v-if="item.timeNum === 0">已满</span>
          <span v-else class="col">
            <span>剩余</span>
            <span>{{item.timeNum}}</span>
            <span>个</span>
          </span>
        </p>
        <p>{{item.timeSub}}</p>
        <van-icon name="underway-o" size=".48rem" :color="index>4 ? '#7c7c7c' : '#000'" />
      </div>
    </div>-->

    <van-button color="#ea4d18" @click="createOrder">下一步</van-button>
  </div>
</template>

<script>
import { getDateStr, time_range, getDate } from '@/utils/index'
import { getLocal, setLocal } from '@/utils/storage'
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  name: 'makeAnAppointment',
  data() {
    return {
      minDate: new Date(2010, 0, 1),
      maxDate: new Date(2010, 0, 31),
      active: 2,
      // swiper 配置
      swiperOption: {
        slidesPerView: 4,
        centeredSlides: true,
        spaceBetween: 30,
        grabCursor: true,
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        on: {
          touchEnd: event => {
            // 通过$refs获取对应的swiper对象
            let swiper = this.$refs.swiper.swiper
            let i = swiper.activeIndex
            if (i < 10) {
              i = i + 1
            }
            this.queryCarTime(getDateStr(i))
          }
        }
      },
      // swiper 时间
      dateList: [],
      // 选择时间
      timeObj: {
        morning: [
          {
            timeSub: '8:00',
            id: 1
          },
          {
            timeSub: '8:15',
            id: 2
          },
          {
            timeSub: '8:30',
            id: 3
          },
          {
            timeSub: '8:45',
            id: 4
          },
          {
            timeSub: '9:00',
            id: 5
          },
          {
            timeSub: '9:15',
            id: 6
          },
          {
            timeSub: '9:30',
            id: 7
          },
          {
            timeSub: '9:45',
            id: 8
          },
          {
            timeSub: '10:00',
            id: 9
          },
          {
            timeSub: '10:15',
            id: 10
          },
          {
            timeSub: '10:30',
            id: 11
          },
          {
            timeSub: '10:45',
            id: 12
          },
          {
            timeSub: '11:00',
            id: 13
          },
          {
            timeSub: '11:15',
            id: 14
          },
          {
            timeSub: '11:30',
            id: 15
          },
          {
            timeSub: '11:45',
            id: 16
          },
          {
            timeSub: '12:00',
            id: 17
          }
        ],
        afternoon: [
          {
            timeSub: '13:00'
          },
          {
            timeSub: '13:15'
          },
          {
            timeSub: '13:30'
          },
          {
            timeSub: '13:45'
          },
          {
            timeSub: '14:00'
          },
          {
            timeSub: '14:15'
          },
          {
            timeSub: '14:30'
          },
          {
            timeSub: '14:45'
          },
          {
            timeSub: '15:00'
          },
          {
            timeSub: '15:15'
          },
          {
            timeSub: '15:30'
          },
          {
            timeSub: '15:45'
          },
          {
            timeSub: '16:00'
          }
        ]
      },

      carInfo: {},

      // 预约车检
      conventionTime: {
        // 时间段
        timeId: '',
        times: '',
        index: null
      }
    }
  },
  created() {
    this.getTime()

    this.timeObj.morning = this.timeObj.morning.map(el => {
      if (el.id === 2) {
        el.disabled = true
      }
      if (el.id === 3) {
        el.have = true
      }
      return el
    })
    // this.queryCarTime(getDateStr(0))

    // if (!this.$route.params.carInfo) {
    //   this.$router.go(-1)
    // } else {
    //   this.carInfo = this.$route.params.carInfo
    //   console.log(this.carInfo, 'this.carInfo')
    // }
  },
  mounted() {
    document.getElementsByTagName('html')[0].style.backgroundColor = '#f5f6f5'
  },
  methods: {
    // 预约时间
    async queryCarTime(date) {
      let { data } = await this.$api.queryCarTime({
        stationId: 1,
        date
      })

      this.conventionTime.times = date

      let forbiddenTime = JSON.parse(getLocal('forbiddenTime'))

      console.log(data, date, '----------预约时间-----------')

      if (data && data.list) {
        this.timeArr = data.list.map(el => {
          if (forbiddenTime) {
            forbiddenTime.map(els => {
              if (date === els.times && els.timeId === el.id) {
                el.timeNum--
              }
            })
          }
          let [start, end] = el.timeSub.split('-')
          if (!time_range(start, end, date)) {
            el.disabled = true
          }
          return el
        })
      }
    },
    // 提交预约
    async createOrder() {
      let params = {
        stationId: 1,
        type: 2,
        times: this.conventionTime.times,
        timeId: this.conventionTime.timeId
      }

      this.$router.push({
        name: 'vehicleInfo',
        params: {
          state: 'convention',
          conventionParams: params
          // vehicleList: this.vehicleList
        }
      })

      console.log(params, '--------提交预约params------')
      // let res = await this.$api.createOrder(params)

      // console.log(res, '------------提交预约 res--------------')

      // if (res.status === 200) {
      //   this.$router.push({
      //     name: 'orderPay',
      //     params: {
      //       carInfo: res.data
      //     }
      //   })
      // }
    },
    // 时间点击
    timeClick(item, index) {
      this.conventionTime.timeId = item.id
      this.conventionTime.index = index
      // if (item.disabled) {
      //   return this.$toast('只可预约当前相邻时间哦')
      // }
      // if (!item.timeNum) {
      //   return this.$toast('无法预约')
      // } else {
      //   this.conventionTime.timeId = item.id
      //   this.conventionTime.index = index
      // }
    },
    // 获取未来时间
    getTime(num = 10) {
      /**
       * num 获取未来天数
       * */

      var dateList = []
      let startDate = new Date()
      let endDate = new Date()
      endDate.setDate(startDate.getDate() + num)
      while (endDate.getTime() - startDate.getTime() >= 0) {
        let month =
          (startDate.getMonth() + 1).toString().length === 1
            ? '0' + (startDate.getMonth() + 1).toString()
            : startDate.getMonth() + 1
        let day =
          startDate.getDate().toString().length === 1
            ? '0' + startDate.getDate()
            : startDate.getDate()

        var myday = startDate.getDay() //注:0-6对应为星期日到星期六
        var xingqi = null
        switch (myday) {
          case 0:
            xingqi = '周日'
            break
          case 1:
            xingqi = '周一'
            break
          case 2:
            xingqi = '周二'
            break
          case 3:
            xingqi = '周三'
            break
          case 4:
            xingqi = '周四'
            break
          case 5:
            xingqi = '周五'
            break
          case 6:
            xingqi = '周六'
            break
          default:
            xingqi = '系统错误！'
        }

        dateList.push({
          time: month + '-' + day,
          day: xingqi
        })
        startDate.setDate(startDate.getDate() + 1)
      }
      this.dateList = dateList
    },
    formatter(day) {
      if (day.date.getDay() === 0) {
        day.type = 'disabled'
      }
      return day
    }
  },
  beforeRouteLeave(to, from, next) {
    document.getElementsByTagName('html')[0].style.backgroundColor = '#fff'
    next()
  },
  components: {
    swiper,
    swiperSlide
  }
}
</script>

<style lang="less" scoped>
.makeAnAppointment {
  // padding-top: 0.427rem;
  .swiper-wrapper,
  .swiper-container {
    height: 1.64rem;
    touch-action: none;
    padding: 0 0.667rem;
  }
  .swiper-container {
    .swiper-slide {
      width: 1.88rem;
      height: 1.64rem;
      border: 1px solid #efefef;
      border-radius: 0.16rem;
      padding-top: 0.213rem;
      p {
        text-align: center;
        font-size: 0.347rem;
        line-height: 0.6rem;
      }
      /deep/ .swiper-slide-shadow-left {
        background-image: linear-gradient(
          to left,
          rgba(0, 0, 0, 0.1),
          rgba(0, 0, 0, 0.3)
        );
      }
      /deep/ .swiper-slide-shadow-right {
        background-image: linear-gradient(
          to right,
          rgba(0, 0, 0, 0.3),
          rgba(0, 0, 0, 0.1)
        );
      }
    }
    .swiper-slide-active {
      border-color: #000;
      color: #eb382f;
    }
  }
  // 选择时间
  .chooseTime {
    display: flex;
    flex-wrap: wrap;
    margin-top: 0.4rem;
    padding: 0 0.227rem;
    div {
      width: 31%;
      height: 2rem;
      flex-grow: 1; /* 子元素按1/n的比例进行拉伸 */
      background-color: #f8f8f8;
      text-align: center;
      margin-right: 0.24rem;
      margin-bottom: 0.307rem;
      text-align: center;
      line-height: 0.64rem;
      font-size: 0.333rem;
      padding-top: 0.107rem;
      color: #7c7c7c;
      .col {
        color: #000;
        span:nth-of-type(2) {
          color: #eb382f;
        }
      }
      p {
        span {
          span {
            display: inline-block;
            margin: 0 0.053rem;
          }
        }
      }
      i {
        // margin-top: 0.08rem;
      }
    }

    .active {
      background-color: #eee;
    }
    .disabled {
      background-color: #e1e1e1;
      opacity: 0.2;
      .col {
        span:nth-of-type(2) {
          color: #333;
        }
      }
    }
    div:nth-of-type(3n) {
      /* 选择个数是3的倍数的元素 */
      margin-right: 0;
    }
    div:nth-of-type(n + 16) {
      /* 选择倒数的三个元素，n可以取0 */
      margin-bottom: 0;
    }
  }

  // 预约说明
  .instructions {
    width: 90%;
    background-color: #fff;
    border-radius: 0.267rem;
    margin: 0.267rem auto 0.4rem;
    padding: 5% 0;
    p {
      text-align: center;
      font-size: 0.373rem;
      margin-bottom: 5%;
    }

    .clearfix {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      div {
        width: 30%;
        span:nth-of-type(1) {
          width: 0.8rem;
          height: 0.453rem;
          margin-right: 0.133rem;
        }
        span {
          font-size: 0.373rem;
          float: left;
        }
      }
      div.fl:nth-of-type(1) .color {
        border: 1px solid #000;
      }
      div.fl:nth-of-type(2) .color {
        background-color: #ff8d27;
      }
      div.fl:nth-of-type(3) .color {
        background-color: #ff0016;
      }
    }
  }
  // 选择时间
  .van-tabs__content {
    .van-tab__pane {
      display: flex;
      flex-wrap: wrap;
      // justify-content: space-around;
      justify-content: space-between;
    }
    .times {
      width: 22%;
      height: 0.8rem;
      line-height: 0.8rem;
      margin-top: 5%;
      text-align: center;
      border: 1px solid #295cc0;
      border-radius: 0.107rem;
      margin-top: 0.267rem;
    }
    .active {
      background-color: #e0e0e0;
    }
    .haveActive {
      background-color: #ff8d27;
      color: #fff;
    }
    .disabled {
      background-color: #ff0016;
      color: #fff;
    }
  }

  .van-button {
    width: 90%;
    display: block;
    margin: 1.227rem auto 0;
    border-radius: 0.16rem;
    font-size: 0.613rem;
    font-weight: 600;
  }
}
</style>
